import { IDomEditor, IModalMenu, SlateNode } from "@wangeditor-next/editor";
import { DOMElement } from "@wangeditor-next/editor/dist/editor/src/utils/dom";

/**
 * 自定义参数
 */
class CustomParamModalMenu implements IModalMenu {
  constructor() {
    this.title = "添加自定义字段";
    this.iconSvg =
      '<svg t="1756954408813" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5231" width="60" height="60"><path d="M136.5504 11.3664v96.0512H909.312c25.088 0 20.224 13.2096 20.224 38.1952v731.2896c0 25.0368 4.8128 39.3216-20.224 39.3216H136.5504c-25.088 0-35.84-14.336-35.84-39.3216v-239.7696H11.3152v279.04c0 93.9008 31.2832 102.7072 125.184 102.7072l772.7616 5.12c93.9008 0 109.568-53.248 109.568-147.0976L1024 145.6128c0-93.8496-20.7872-134.2464-114.688-134.2464H136.5504z m250.3168 625.7664h375.4496v125.184H386.8672v-125.184zM261.632 499.5072l75.1104 75.0592 106.3936-112.64L512 386.8672 443.1872 311.7568l-106.3936-112.64L261.632 274.2272l50.0736 50.0224H11.3664v125.184H311.808l-50.0736 50.0736z" fill="#666666" p-id="5232"></path></svg>';
    this.tag = "button";
    this.showModal = true;
    this.modalWidth = 300;
  }
  showModal: boolean;
  modalWidth: number;
  title: string;
  iconSvg?: string | undefined;
  hotkey?: string | undefined;
  alwaysEnable?: boolean | undefined;
  tag: string;
  width?: number | undefined;
  getIcon?: ((editor: IDomEditor) => string) | undefined;
  getTitle?: ((editor: IDomEditor) => string) | undefined;
  private fieldName: string = "";

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor: IDomEditor): boolean {
    return false;
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor: IDomEditor): string | boolean {
    return "";
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor: IDomEditor): boolean {
    return false;
  }

  // 点击菜单时触发的函数
  exec(editor: IDomEditor, value: string | boolean) {
    this.showModal = true;
  }

  // 弹出框 modal 的定位：1. 返回某一个 SlateNode； 2. 返回 null （根据当前选区自动定位）
  getModalPositionNode(editor: IDomEditor): SlateNode | null {
    return null; // modal 依据选区定位
  }

  // 定义 modal 内部的 DOM Element
  getModalContentElem(editor: IDomEditor): DOMElement {
    const div = document.createElement("div");
    div.style.padding = "20px";

    // 标题
    const title = document.createElement("h3");
    title.textContent = "添加自定义字段";
    title.style.marginTop = "0";
    title.style.marginBottom = "15px";
    title.style.color = "#333";
    div.appendChild(title);

    // 输入框
    const inputContainer = document.createElement("div");
    inputContainer.style.marginBottom = "15px";

    const label = document.createElement("label");
    label.textContent = "字段名称";
    label.style.display = "block";
    label.style.marginBottom = "5px";
    label.style.fontWeight = "500";
    inputContainer.appendChild(label);

    const input = document.createElement("input");
    input.type = "text";
    input.placeholder = "请输入字段名称";
    input.style.width = "100%";
    input.style.padding = "8px";
    input.style.border = "1px solid #ddd";
    input.style.borderRadius = "4px";
    input.addEventListener("input", (e: Event) => {
      this.fieldName = (e.target as HTMLInputElement).value;
    });
    inputContainer.appendChild(input);
    div.appendChild(inputContainer);

    // 按钮容器
    const buttonContainer = document.createElement("div");
    buttonContainer.style.display = "flex";
    buttonContainer.style.justifyContent = "flex-end";
    buttonContainer.style.gap = "10px";

    // 取消按钮
    const cancelButton = document.createElement("button");
    cancelButton.textContent = "取消";
    cancelButton.style.padding = "8px 16px";
    cancelButton.style.backgroundColor = "#f4f4f5";
    cancelButton.style.color = "#606266";
    cancelButton.style.border = "none";
    cancelButton.style.borderRadius = "4px";
    cancelButton.style.cursor = "pointer";
    cancelButton.addEventListener("click", () => {
      this.showModal = false;
      this.fieldName = "";
    });
    buttonContainer.appendChild(cancelButton);

    // 确定按钮
    const confirmButton = document.createElement("button");
    confirmButton.textContent = "确定";
    confirmButton.style.padding = "8px 16px";
    confirmButton.style.backgroundColor = "#409eff";
    confirmButton.style.color = "white";
    confirmButton.style.border = "none";
    confirmButton.style.borderRadius = "4px";
    confirmButton.style.cursor = "pointer";
    confirmButton.addEventListener("click", () => {
      if (!this.fieldName.trim()) {
        alert("请输入字段名称");
        return;
      }

      if (editor) {
        editor.restoreSelection();
        const node = {
          type: "disabledText",
          value: this.fieldName,
          children: [{ text: this.fieldName }],
        };

        editor.insertNode(node);
      }

      this.showModal = false;
      this.fieldName = "";
    });
    buttonContainer.appendChild(confirmButton);

    div.appendChild(buttonContainer);

    // 添加键盘事件支持
    input.addEventListener("keypress", (e: KeyboardEvent) => {
      if (e.key === "Enter") {
        confirmButton.click();
      }
    });

    return div;
  }
}

export default CustomParamModalMenu;
